<!--
 * @Author: fengxx
 * @Date: 2025-10-23 08:50:22
 * @LastEditors: fengxx
 * @LastEditTime: 2025-10-27 11:23:15
-->
<script setup lang="ts">
import { defineAsyncComponent, onMounted, ref } from 'vue'
import LoadingComp from '@/components/LoadingComp.vue'
import ErrorComp from '@/components/ErrorComp.vue'
import { useFetch } from '@/hooks/fetch'
import { useMouse } from '@/hooks/mouse'
const { x, y } = useMouse()

// const AsyncComp = defineAsyncComponent(() => {
//   return new Promise((resolve, reject) => {
//     // 模拟网络延迟（可选）
//     setTimeout(() => {
//       // 实际加载组件：使用动态 import
//       import('../components/ChildTest.vue')
//         .then((module) => {
//           // 成功：resolve 组件模块
//           resolve(module.default) // 注意：要取 .default
//         })
//         .catch((err) => {
//           // 失败：reject 错误
//           reject(err)
//         })
//     }, 1000) // 模拟延迟
//   })
// })
// const AsyncComp = defineAsyncComponent(() => import('../components/ChildTest.vue'))
const AsyncComp = defineAsyncComponent({
  // 加载函数（具体要显示的异步组件）
  // loader: () => import('../components/ChildTest.vue'),
  loader: () =>
    new Promise(async (resolve, reject) => {
      // reject('sdfdsg')
      try {
        await new Promise((r) => setTimeout(r, 4000)) // 模拟延迟
        const module = await import('../components/ChildTest.vue')
        resolve(module.default) // ✅ resolve 组件本身
      } catch (err) {
        reject(err)
      }
    }),

  // 加载异步组件时使用的组件（建议使用同步组件）
  loadingComponent: LoadingComp,
  // 展示加载组件前的延迟时间，默认为 200ms
  delay: 0,

  // 加载失败后展示的组件（建议使用同步组件）
  errorComponent: ErrorComp,
  // 如果提供了一个 timeout 时间限制，并超时了
  // 也会显示这里配置的报错组件，默认值是：Infinity
  timeout: 3000,
  // suspensible: 是否支持Suspense内置组件的功能
  // suspensible: false,
})

const show = ref(false)
// const url = ref(
//   'https://mock.mengxuegu.com/mock/6888141205d8245baf88ff7e/example/home/getVisitTypeDatas',
// )

// onMounted(() => {
//   const { data, error } = useFetch(url)
//   url.value = 'https://mock.mengxuegu.com/mock/6888141205d8245baf88ff7e/example/home/total'
//   console.log(data, error)
// })

// 在模板中启⽤ v-highlight
// const vHighlight = {
//   mounted: (el) => {
//     el.classList.add('is-highlight')
//   },
// }
const baz = ref('baz')
</script>
<template>
  <div v-if="show">
    当前页面正在加载中，如有需要，请移步其他页面
    <router-link to="/home">首页</router-link>
  </div>
  <div v-highlight:foo.bar="baz">yyy</div>
  <!-- pending: 加载中触发；resolve：加载成功时触发；fallback：后备组件显示时触发 -->
  <Suspense @pending="show = true" @resolve="show = false" @fallback="console.log('fallback')">
    <!-- 具有深层异步依赖的组件 -->
    <AsyncComp />

    <!-- 后备组件渲染时机：当前异步组件还在加载过程中或者加载失败时 -->
    <!-- 在 #fallback 插槽中显示 “正在加载中” -->
    <template #fallback> Loading2222... </template>
  </Suspense>
  <!-- <AsyncComp /> -->
  <!-- <component :is="AsyncComp" /> -->
  <div>Mouse position is at: {{ x }}, {{ y }}</div>
</template>
